<template>
  <div class="clue-container">
    <div class="detail-wrap">
      <!--tab按钮筛选-->
      <ul class="tab-wrap-detail">
        <li class="tab-item-detail" @click="tabChange(0)" :class="{current: tabIndex===0}">线索详情</li>
        <li class="tab-item-detail" @click="tabChange(1)" :class="{current: tabIndex===1}">跟进纪录</li>
      </ul>
      <!--线索详情-->
      <div v-show="tabIndex === 0">
        <!--客户需求-->
        <div class="detail">
          <div class="detail-header detail-hd-1">
            <span class="clue-title">客户需求</span>
            <em>{{baseInfo.status | parseStatus}}</em>
          </div>
          <div class="detail-item">
            <div class="detail-title">企业名称</div>
            <div class="detail-text">{{customRequire.customName}}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">产品意向</div>
            <div class="detail-text">{{customRequire.productTypeName}} - {{customRequire.productName}}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">需求备注</div>
            <div class="detail-text" style="word-break: break-all;">{{customRequire.requirement}}</div>
          </div>
        </div>
        <!--联系人-->
        <div class="detail">
          <div class="detail-header detail-hd-1">
            <span class="clue-title">联系人</span>
          </div>
          <div class="detail-item">
            <div class="detail-contact" v-for="contact in contactsList" :key="contact.pid">
              <span>{{contact.name}}</span>
              <span class="role role-1" v-if="contact.type===0">{{contact.type | parseRole}}</span>
              <span class="role role-2" v-if="contact.type===1">{{contact.type | parseRole}}</span>
              <span class="role role-3" v-if="contact.type===2">{{contact.type | parseRole}}</span>
              <span class="role role-4" v-if="contact.type===3">{{contact.type | parseRole}}</span>
              <span class="role role-5" v-if="contact.type===4">{{contact.type | parseRole}}</span>
              <span class="role role-6" v-if="contact.type===5">{{contact.type | parseRole}}</span>
              <span class="role role-7" v-if="contact.type===6">{{contact.type | parseRole}}</span>
              <span class="role role-8" v-if="contact.type===7">{{contact.type | parseRole}}</span>
              <span>{{contact.position}}</span>
            </div>
          </div>
        </div>
        <!--企业信息-->
        <div class="detail">
          <div class="detail-header detail-hd-2">
            <span class="clue-title">企业信息</span>
          </div>
          <div class="detail-item clearfix">
            <div class="detail-title">公司名称</div>
            <div class="detail-text">{{customInfo.customName}}</div>
            <span class="detail-text unchecked" v-if="customInfo.isChecked === -1">未校验</span>
            <i v-if="customInfo.isChecked === -1" @click="toUpdateCompany(id,customInfo.customName)"
               style="float:right;padding:10px;position:relative;top:-10px;right:-10px;">修改</i>
          </div>
          <div class="detail-item">
            <div class="detail-title">初始名称</div>
            <div class="detail-text">{{customInfo.initialCustomName}}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">所属行业</div>
            <div class="detail-text">
              <span>{{customInfo.oneIndustry}}</span>
              <span v-if="customInfo.twoIndustry">{{'·'+customInfo.twoIndustry}}</span>
              <span v-if="customInfo.threeIndustry">{{'·'+customInfo.threeIndustry}}</span>
              <span v-if="customInfo.fourIndustry">{{'·'+customInfo.fourIndustry}}</span>
            </div>
          </div>
          <div class="detail-item">
            <div class="detail-title">人员规模</div>
            <div class="detail-text">{{customInfo.personSize}}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">经营规模</div>
            <div class="detail-text">{{customInfo.scaleOperation}}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">公司电话</div>
            <div class="detail-text">{{customInfo.phone}}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">官方网站</div>
            <div class="detail-text">{{customInfo.website}}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">所在地区</div>
            <div class="detail-text"><span>{{customInfo.province}}</span><span>{{customInfo.city}}</span></div>
          </div>
          <div class="detail-item">
            <div class="detail-title">公司地址</div>
            <div class="detail-text">{{customInfo.address}}</div>
          </div>
        </div>
        <!--其他信息-->
        <div class="detail">
          <div class="detail-header detail-hd-3">
            <span class="clue-title">其他信息</span>
          </div>
          <div class="detail-item">
            <div class="detail-title">线索负责人</div>
            <div class="detail-text">{{baseInfo.userName}}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">线索状态</div>
            <div class="detail-text">{{baseInfo.status | parseStatus}}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">线索池</div>
            <div class="detail-text">{{otherInfo.seaName}}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">线索来源</div>
            <div class="detail-text">
              <span>{{otherInfo.sourceName}}</span>
              <span class="ml5 mr5" v-if="otherInfo.sourceSubName">{{'/'+otherInfo.sourceSubName}}</span>
            </div>
          </div>
          <div class="detail-item">
            <div class="detail-title">创建人</div>
            <div class="detail-text">{{otherInfo.creatorName}}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">创建时间</div>
            <div class="detail-text">{{otherInfo.createTime}}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">最后更新时间</div>
            <div class="detail-text">{{otherInfo.updateTime}}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">过期时间</div>
            <div class="detail-text">{{otherInfo.outChangeTime}}</div>
          </div>
        </div>
        <!--<button class="ui-btn ui-btn-primary ui-btn-lg" ng-if="clue.status==-2 && !isSea" ng-click="retrieveClue()">领回本线索</button>-->
      </div>
      <!--跟进记录-->
      <div v-show="tabIndex === 1">
        <ul class="note-list" v-if="logList.length > 0"
            v-infinite-scroll="loadMoreLog"
            :infinite-scroll-disabled="loading"
            infinite-scroll-distance="10">
          <li v-for="log in logList" :key="log.pid">
            <img :src="log.createLogo">
            <div class="note-cnt">
              <div class="note-hd">
                <span>{{log.createName}}</span>
                <span>{{log.createTime}}</span>
              </div>
              <div class="note-bd" v-html="log.intro"></div>
            </div>
          </li>
        </ul>
        <div v-if="logList.length === 0" class="no-data">暂无数据</div>
        <div v-if="logList.length > 0 && isLoaded" class="no-data">已全部加载完成</div>
      </div>
    </div>
  </div>
</template>

<script>
import {GetBaseInfo, GetRequirement, GetCustom, GetOther, GetContacts} from '@/services/clue.service'
import {GetLogList} from '@/services/common.service'
import {dateToString, parseAvatar} from '@/core/utils'
export default {
  name: 'ClueDetail',
  props: {
    'id': String
  },
  data () {
    return {
      // tab页签的切换
      tabIndex: 0,
      // 线索详情
      baseInfo: {},
      customRequire: {},
      customInfo: {},
      otherInfo: {},
      contactsList: [],
      // 跟进记录列表
      loading: false,
      isLoaded: false,
      limit: 6,
      offset: 0,
      logList: []
    }
  },
  computed: {},
  watch: {},
  created () {
    this.initClueDetail()
  },
  methods: {
    initClueDetail () {
      this.getBaseInfo()
      this.getRequirement()
      this.getCustom()
      this.getOther()
      this.getContacts()
    },
    // tab点击事件
    tabChange (index) {
      if (index === 0) {
        this.tabIndex = index
      }
      if (index === 1) {
        this.tabIndex = index
        this.getLogList()
      }
    },
    // 线索详情
    getBaseInfo () {
      GetBaseInfo(this.id).then((res) => {
        this.baseInfo = res
      })
    },
    getRequirement () {
      GetRequirement(this.id).then((res) => {
        this.customRequire = res
      })
    },
    getCustom () {
      GetCustom(this.id).then((res) => {
        this.customInfo = res
      })
    },
    getOther () {
      GetOther(this.id).then((res) => {
        this.otherInfo = res
        this.otherInfo.createTime = dateToString(this.otherInfo.createTime, 'yyyy-MM-dd HH:mm')
        this.otherInfo.updateTime = dateToString(this.otherInfo.updateTime, 'yyyy-MM-dd HH:mm')
        this.otherInfo.outChangeTime = dateToString(this.otherInfo.outChangeTime, 'yyyy-MM-dd HH:mm')
      })
    },
    getContacts () {
      let param = {type: 0, uuid: this.id}
      GetContacts(param).then((res) => {
        this.contactsList = res
      })
    },
    getLogList () {
      this.loading = true
      let param = {type: 0, uuid: this.id, logType: 1}
      GetLogList(this.limit, this.offset, this.orderby, this.direction, param).then((res) => {
        if (this.offset === 0 && res.datas.length === 0) {
          this.logList = []
        } else {
          this.logList = this.logList.concat(res.datas)
          this.offset = this.limit + this.offset
          res.datas.length <= this.limit ? this.isLoaded = true : this.isLoaded = false
          res.datas.forEach((item, index) => {
            this.logList[index].createLogo = parseAvatar(item.createLogo)
            this.logList[index].createTime = dateToString(item.createTime, 'yyyy-MM-dd HH:mm')
          })
        }
        this.loading = false
      })
    },
    loadMoreLog () {
      this.getLogList()
    },
    toUpdateCompany (clueId, customName) {
      this.$router.push({
        name: 'UpdateCompany',
        params: {
          id: clueId,
          customName: customName
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .detail-wrap
    padding 0 15px
</style>
